<template>
  <div>
    <div class="mt-3 ml-2">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="类别">
          <el-select v-model="params.one_category" placeholder="一级类别">
            <el-option label="现代能源经济" value="现代能源经济"></el-option>
            <el-option label="绿色建筑" value="绿色建筑"></el-option>
            <el-option label="平台标准" value="平台标准"></el-option>
            <el-option label="科技支撑" value="科技支撑"></el-option>
            <el-option label="绿色金融" value="绿色金融"></el-option>
            <el-option label="其他示范场景（项目）" value="其他示范场景（项目）"></el-option>
            <el-option label="新型工业化" value="新型工业化"></el-option>
            <el-option label="生态系统保护修复" value="生态系统保护修复"></el-option>
            <el-option label="机构" value="机构"></el-option>
            <el-option label="农牧业现代化" value="农牧业现代化"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="盟市">
          <el-select v-model="params.addr_city" placeholder="盟市">
            <el-option label="全区" value=""></el-option>
            <el-option label="呼市" value="呼和浩特市"></el-option>
            <el-option label="包头" value="包头市"></el-option>
            <el-option label="乌海" value="乌海市"></el-option>
            <el-option label="赤峰" value="赤峰市"></el-option>
            <el-option label="兴安盟" value="兴安盟"></el-option>
            <el-option label="呼伦贝尔" value="呼伦贝尔市"></el-option>
            <el-option label="通辽" value="通辽市"></el-option>
            <el-option label="锡林郭勒" value="锡林郭勒盟"></el-option>
            <el-option label="乌兰察布" value="乌兰察布市"></el-option>
            <el-option label="鄂尔多斯" value="鄂尔多斯市"></el-option>
            <el-option label="巴彦淖尔" value="巴彦淖尔市"></el-option>
            <el-option label="阿拉善" value="阿拉善盟"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="params.project_name" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="建设开始年限">
          <el-date-picker
              v-model="params.test"
              type="year"
              placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="建设截止年限">
          <el-date-picker
              v-model="params.test"
              type="year"
              placeholder="选择年">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          v-loading="loading"
          border
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="tableData" style="width: 100%"
          height="800">
        <el-table-column
            fixed
            prop="num"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            prop="project_name"
            label="项目名称"
            width="250">
        </el-table-column>
        <el-table-column
            prop="tz_company"
            label="投资单位"
            width="220">
        </el-table-column>
        <el-table-column
            prop="build_start_end"
            label="建设起止年限"
            width="150">
        </el-table-column>
        <el-table-column
            prop="addr_city"
            label="盟市"
            width="100">
        </el-table-column>
        <el-table-column
            prop="addr_county"
            label="旗县"
            width="100">
        </el-table-column>
        <el-table-column
            prop="addr_park"
            label="园区"
            width="220">
        </el-table-column><el-table-column
            prop="tz_sum"
            label="总投资(亿元）"
            width="120">
        </el-table-column><el-table-column
            prop="tz_complete"
            label="累计完成投资（亿元）"
            width="120">
        </el-table-column><el-table-column
            prop="tz_get_support"
            label="已获资金支持情况（政府投资+银行贷款）（亿元）"
            width="120">
        </el-table-column><el-table-column
            prop="tz_needs"
            label="融资需求（亿元）"
            width="120">
        </el-table-column>
        <el-table-column
            prop="app_type"
            label="应用类型"
            width="120">
        </el-table-column>
        <el-table-column
            prop="one_category"
            label="一级类别"
            width="120">
        </el-table-column>
        <el-table-column
            prop="two_category"
            label="二级类别"
            width="120">
        </el-table-column>
        <el-table-column
            prop="build_plan"
            label="建设进度"
            width="120">
        </el-table-column>
        <el-table-column
            prop="result_jn"
            label="节能效果（年节约XX吨标准煤）"
            width="120">
        </el-table-column><el-table-column
            prop="result_jt"
            label="降碳效果（年减排二氧化碳XX吨）"
            width="120">
        </el-table-column><el-table-column
            prop="contacts"
            label="企业联系人"
            width="120">
        </el-table-column><el-table-column
            prop="phone"
            label="手机号"
            width="120">
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleImg(scope.$index, scope.row)">图片</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleVideo(scope.$index, scope.row)">视频</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="图片" :visible.sync="imgDialogVisible"
                 width="50%"
                 center>
        <el-image :src="imgSrc"></el-image>
      </el-dialog>
      <el-dialog title="图片" :visible.sync="videoDialogVisible"
                 width="30%"
                 center>
        <dplayer ref="dplayer" :dplayer-data="dplayerData"></dplayer>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dplayer from '@/components/DPlayer.vue'
export default {
  name: "demo-table",
  components: {
    dplayer
  },
  data() {
    return {
      loading: true,
      tableData: [],
      params: {
        test: '',
        one_category: '',
        addr_city: '',
        project_name: ''
      },
      imgDialogVisible: false,
      videoDialogVisible: false,
      imgSrc: require('../../assets/images/eeds/img_eeds_1.jpeg'),
      dplayerData: {
        style: 'width:100%;height:330px;'
      },
      info: {
        video: require('../../assets/videos/eeds/video_eeds_1.mp4'),
        pic: ''
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      debugger;
      this.loading = true;
      this.$axios.post('/api/demo/fgwTableList',this.params).then(res => {
        this.tableData = res.data.data;
        this.loading = false;
      }).catch(err=>{
        this.tableData = [];
        this.loading = false;
      })
    },
    onSubmit() {
      this.initData();
    },
    handleImg(index, row) {
      console.log(row);
      this.imgDialogVisible = true;
    },
    handleVideo(index, row) {
      this.videoDialogVisible = true;
    },
    switchVideo() {
      this.$refs.dplayer.switchVideo(this.info)
    }
  }
}
</script>

<style scoped>

</style>
